<template>
<view>
<!--hotmall/packageC/mybargain/mybargain.wxml-->
<view v-for="(item, index) in shopList" :key="index" class="li">
  <view class="top">
    <view>{{item.add_time}}</view>
    <view class="daojishi" v-if="isOver">倒计时:
      <view class="time_tt">
        <view v-if="isOver" class="time">
          <view class="endTime">
            <view v-if="overTime[index][0]!= 0">
            {{overTime[index][0]}}天</view>
            <view>{{overTime[index][1]}}</view>:
            <view>{{overTime[index][2]}}</view>:
            <view>{{overTime[index][3]}}</view>
          </view>
        </view>
        <view v-if="!isOver" class="time">
          <view>活动已结束</view>
        </view>
      </view>
    </view>
  </view>
  <view class="content" v-if="isOver">
    <view class="con-top">
      <image :src="item.bargain.img"></image>
      <view>
        <view>{{item.bargain.name}}</view>
        <!-- <view class='color'>柠檬黄</view> -->
        <view class="money">底价:￥{{item.bargain.target_price}}
          <text>原价:￥{{item.bargain.price}}</text>
        </view>
      </view>
    </view>
    <view class="con-bot">已砍{{item.cut_prices}}元，还差{{chajia[index]}}元砍到底价</view>
    <view class="bottom">
      <view>砍价中</view>
      <button hover-class="none" @tap="jixu" :data-index="index">继续砍价</button>
    </view>
  </view>
  <view v-if="!isOver" class="jieshu">
    <image :src="item.bargain.img"> </image>
    <view class="right">
      <view class="name">{{item.bargain.name}}</view>
      <view class="time">已结束</view>
      <view class="zhuangt" v-if="item.type == 0">砍价失败</view>
      <view class="zhuangtr" v-if="item.type == 1">砍价成功</view>
    </view>
  </view>
</view>
<view v-if="noshop" class="zanwu">
  <image src="/static/remao_shop/img/noData.png"></image>
  <view>暂无商品</view>
</view>
<view class="bai"></view>
<view class="bottom-bar">
  <view @tap="mybargain">
    <image src="/static/remao_shop/img/shoph.png"></image>
    <view>砍价商品</view>
  </view>
  <view class="right">
    <image src="/static/remao_shop/img/bargainr.png"></image>
    <view>我的砍价</view>
  </view>
</view>
</view>
</template>

<script>
// hotmall/packageC/mybargain/mybargain.js
import api from "../../../api";
var app = getApp();
var countTime;

export default {
  data() {
    return {
      noshop: false,
      shopList: [],
      // 倒计时数组
      overTime: [],
      // 判断活动是否结束
      isOver: true,
      end_time: [],
      chajia: [],
      uid: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getList();
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getList();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getList: function () {
      var that = this;
      app.globalData.request({
        url: api.default.bargain_all_cut,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        data: {
          uid: this.uid
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            shopList: res.list
          });

          if (res.list.length == 0) {
            this.setData({
              noshop: true
            });
          } else {
            this.setData({
              noshop: false
            });
          }

          var cha = [];

          for (let i = 0; i < res.list.length; i++) {
            var d = res.list[i].surplus_price - res.list[i].bargain.target_price;
            d.toFixed(2);
            cha.push(d.toFixed(2));
          }

          this.setData({
            chajia: cha
          });
          var time = [];

          for (let i = 0; i < res.list.length; i++) {
            time.push(res.list[i].bargain.end_time);
          }

          this.setData({
            end_time: time
          });
        }
      }); // 计时器

      countTime = setInterval(that.countDown, 1000);
    },

    // 倒计时
    countDown() {
      var timers = [];

      for (let i = 0; i < this.end_time.length; i++) {
        let endTime = parseInt(this.end_time[i]);
        let nowTime = parseInt(new Date().getTime() / 1000); //console.log(nowTime, endTime)

        let time = endTime - nowTime;
        var day = parseInt(time / 60 / 60 / 24); //console.log(day)

        var hour = parseInt(time / 60 / 60 % 24); //console.log(hour)

        if (String(hour).length == 1) {
          hour = '0' + hour;
        }

        var minute = parseInt(time / 60 % 60);

        if (String(minute).length == 1) {
          minute = '0' + minute;
        }

        var seconds = parseInt(time % 60);

        if (String(seconds).length == 1) {
          seconds = '0' + seconds;
        } // console.log(hour, minute, seconds)


        let timer = []; //所有时间数组

        timer[0] = day;
        timer[1] = hour;
        timer[2] = minute;
        timer[3] = seconds; // console.log(timer)

        timers.push(timer);

        if (time > 0) {
          //判断如果时间过期则改变
          this.setData({
            overTime: timers,
            isOver: true
          });
        } else {
          clearInterval(countTime);
          this.setData({
            isOver: false
          });
        }
      } // console.log(this.data.overTime)

    },

    //跳转砍价页面
    jixu: function (e) {
      console.log(e.currentTarget.dataset.index);
      wx.navigateTo({
        url: '../bargaincharge/bargaincharge?id=' + this.shopList[e.currentTarget.dataset.index].bargain.id
      });
    },
    //跳转砍价商品
    mybargain: function () {
      wx.redirectTo({
        url: '../bargainirg/bargainirg'
      });
    }
  }
};
</script>
<style>
@import "./mybargain.css";
</style>